<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    <style>
        table {
            border-spacing: 4px 0;
            margin-left: -4px;
            margin-bottom: 20px;
        }

        td,
        th {
            width: 150px;
            height: 50px;
            font-size: 20px;
            text-align: center;
            margin-bottom: 0 !important;
            border: 1px solid gray;
        }

        button {
            background-color: red;
            color: white;
            border: none;
            width: 20px;
            height: 20px;
        }

        .delete {
            width: 45px;
            height: 35px;
        }

        .maxOrMin {
            background-color: grey;
        }

        section {
            width: 1000px;
            height: 220px;
            border: 1px solid grey;
            margin-top: 20px;
            padding-left: 10px;
        }

        section span {
            font-size: 20px;
        }

        input {
            width: 300px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <main id="app">
        <div v-if="goods.length != 0">
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(product, index) in goods">
                    <td>{{product.shopName}}</td>
                    <td>{{product.price}}</td>
                    <td>
                        <shop-com @numchange='refreshNum' :products='goods' :i='index'></shop-com>
                    </td>
                    <td>
                        <button class="delete" @click='deleteGoods(index)'>移除</button>
                    </td>
                </tr>
            </table>
            <input type="text" v-model="user">
            <input type="text" v-model="address">
            <br>
            <div>
                <section>
                    <h1 style='font-size: 40px;'>清单</h1>
                    <span>
                        商品总价:{{allPrice}}
                        <br> 收件人:{{user}}
                        <br> 收货地址{{address}}
                    </span>
                </section>
            </div>
        </div>
        <h1 v-else>购物车为空</h1>
    </main>

    <script id="shopNum" type="text/html">
        <div>
            <button :class='{maxOrMin:products[i].num <= 0}' @click='preClick()'>-</button>
            <span>{{products[i].num}}</span>
            <button :class='{maxOrMin:products[i].num >= 10}' @click='nextClick()'>+</button>
        </div>
    </script>
    <script>
        Vue.component('shop-com', {
            template: '#shopNum',
            props: ['i', 'products'],
            data() {
                return {
                    goodsNum: this.products[this.i].num
                }
            },
            methods: {
                preClick() {
                    if (this.goodsNum == 0) {
                        return
                    }
                    this.$emit('numchange', { shop: this.i, newNum: --this.goodsNum })
                },
                nextClick() {
                    if (this.goodsNum == 10) {
                        return
                    }
                    this.$emit('numchange', { shop: this.i, newNum: ++this.goodsNum })
                },
            },
        })

        var vue = new Vue({
            el: '#app',
            data: {
                goods: [
                    {
                        shopName: '辣条',
                        price: 1,
                        num: 5
                    },
                    {
                        shopName: '泡椒凤爪',
                        price: 1.5,
                        num: 10
                    },
                    {
                        shopName: '巧克力',
                        price: 3,
                        num: 0
                    }
                ],
                user: '',
                address: ''
            },
            methods: {
                refreshNum(value) {
                    this.goods[value.shop].num = value.newNum
                },
                deleteGoods(value) {
                    this.goods.splice(value, 1)
                }
            },
            computed: {
                allPrice: function () {
                    var temp = 0
                    for (var i = 0; i < this.goods.length; i++) {
                        temp += this.goods[i].price * this.goods[i].num
                    }
                    return temp
                }
            },
        })
    </script>
</body>

</html>